<template>
    <view class="page-body">
        <!-- 页面内容开始 -->

        <!-- 表格搜索组件开始 -->
        <vk-data-table-query v-model="queryForm1.formData" :columns="queryForm1.columns" @search="search"></vk-data-table-query>
        <!-- 表格搜索组件结束 -->

        <!-- 自定义按钮区域开始 -->
        <view>
            <el-row>
                <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="refresh">刷新</el-button>
                <el-button type="success" size="small" icon="el-icon-circle-plus-outline" @click="addBtn">添加</el-button>
            </el-row>
        </view>
        <!-- 自定义按钮区域结束 -->

        <!-- 表格组件开始 -->
        <vk-data-table ref="table1" :action="table1.action" :columns="table1.columns" :query-form-param="queryForm1" :right-btns="['detail_auto', 'update', 'delete']" :selection="true" :row-no="true" :pagination="true" @update="updateBtn" @delete="deleteBtn" @current-change="currentChange" @selection-change="selectionChange"></vk-data-table>
        <!-- 表格组件结束 -->

        <!-- 添加或编辑的弹窗开始 -->
        <vk-data-dialog v-model="form1.props.show" :title="form1.props.title" width="1000px" mode="form" :close-on-click-modal="false">
            <vk-data-form
                v-model="form1.data"
                :rules="form1.props.rules"
                :action="form1.props.action"
                :form-type="form1.props.formType"
                :columns="form1.props.columns"
                inline
                :columns-number="2"
                size="mini"
                label-width="120px"
                @success="
                    form1.props.show = false;
                    refresh();
                "></vk-data-form>
        </vk-data-dialog>
        <!-- 添加或编辑的弹窗结束 -->

        <!-- 页面内容结束 -->
    </view>
</template>

<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
var originalForms = {}; // 表单初始化数据

export default {
    data() {
        // 页面数据变量
        return {
            // 页面是否请求中或加载中
            loading: false,
            // init请求返回的数据
            data: {},
            // 表格相关开始 -----------------------------------------------------------
            table1: {
                // 表格数据请求地址
                action: 'admin/cs-services/sys/getList',
                // 表格字段显示规则
                columns: [
                    { key: '_id', title: 'id', type: 'text', width: 220, show: ['detail'] },
                    { key: 'category_name', title: '分类', type: 'text', width: 220 },

                    // {
                    //     key: 'categoryList',
                    //     title: '所属分类',
                    //     type: 'text',
                    //     width: 120,
                    //     formatter: function (val, row, column, index) {
                    //         if (row.category_id.length === 0) return '全部';
                    //         if (val.length === 0 && row.category_id.length > 0) return row.category_id;
                    //         let str = '';
                    //         val.map((item, index) => {
                    //             str += `、${item.name}`;
                    //         });
                    //         if (str) str = str.substring(1);
                    //         return str;
                    //     }
                    // },
                    { key: 'name', title: '标题', type: 'text', width: 220 },
                    { key: 'image', title: '封面图', type: 'image', width: 120, imageWidth: 100 },

                    {
                        key: 'is_top',
                        title: '是否置顶',
                        type: 'tag',
                        width: 120,
                        size: 'small',
                        data: [
                            { value: 1, label: '是', tagType: 'success' },
                            { value: 0, label: '否', tagType: 'danger' }
                        ]
                    },

                    { key: '_add_time', title: '添加时间', type: 'time', width: 160, sortable: 'custom' },
                    { key: '_add_time', title: '距离现在', type: 'dateDiff', width: 120 }
                ],
                // 多选框选中的值
                multipleSelection: [],
                // 当前高亮的记录
                selectItem: ''
            },
            // 表格相关结束 -----------------------------------------------------------
            // 表单相关开始 -----------------------------------------------------------
            // 查询表单请求数据
            queryForm1: {
                // 查询表单数据源，可在此设置默认值
                formData: {},
                // 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
                columns: [
                    { key: 'name', title: '标题', type: 'text', width: 160, mode: '%%' },
                    { key: 'keywords', title: '关键词', type: 'text', width: 160, mode: '%%' },
                    { key: '_add_time', title: '添加时间', type: 'datetimerange', width: 400, mode: '[]' }
                ]
            },
            form1: {
                // 表单请求数据，此处可以设置默认值
                data: {
                    view_num: 0,

                    is_top: false,
                    isEnable: true
                },
                // 表单属性
                props: {
                    // 表单请求地址
                    action: '',
                    // 表单字段显示规则
                    columns: [
                        {
                            key: 'category_name',
                            title: '所属分类',
                            type: 'remote-select',
                            placeholder: '请选择分类',
                            action: 'admin/cs-services-category/sys/getList',
                            actionData: {
                                sortRule: [{ name: 'sort' }, { type: 'asc' }]
                            },
                            props: { list: 'rows', value: 'name', label: 'name' },
                            clearable: true,
                            showLabel: true,
                            showAll: true,
                            oneLine: true
                        },
                        { key: 'name', title: '标题', type: 'text', placeholder: '请输入服务标题' },
                        { key: 'keywords', title: '关键词', type: 'tag' },

                        { key: 'image', title: '封面图', type: 'file-select', fileType: 'image', multiple: false, tips: '图片比例约为250*150', oneLine: true },
                        { key: 'swiper', title: '轮播图', type: 'file-select', fileType: 'image', multiple: true, multipleLimit: 6, tips: '图片比例约为600*350', oneLine: true },

                        {
                            key: 'introduction',
                            title: '产品简介',
                            type: 'textarea',
                            autosize: { minRows: 4, maxRows: 10 },
                            maxlength: 200,
                            oneLine: true,
                            width: 800,
                            showWordLimit: true
                        },

                        {
                            key: 'isEnable',
                            title: '是否上架',
                            oneLine: true,
                            type: 'switch'
                        },
                        { key: 'base_price', title: '原价', type: 'number', placeholder: '留空不显示价格' },
                        { key: 'price', title: '价格', type: 'number', placeholder: '留空不显示价格' },

                        { key: 'details', title: '产品详情', type: 'custom', component: 'custom-editor-tinymce', width: 800, oneLine: true },
                        {
                            key: 'is_top',
                            title: '是否置顶',
                            type: 'switch',

                            tips: '置顶内容将显示在首页'
                        }
                    ],
                    // 表单验证规则
                    rules: {
                        category_id: [
                            {
                                required: true,
                                message: '所属分类不能为空',
                                trigger: 'change'
                            }
                        ],
                        name: [
                            {
                                required: true,
                                message: '标题不能为空',
                                trigger: 'change'
                            }
                        ],
                        image: [
                            {
                                required: true,
                                message: '封面图不能为空',
                                trigger: 'change'
                            }
                        ],
                        abstract: [
                            {
                                required: true,
                                message: '摘要不能为空',
                                trigger: 'change'
                            }
                        ],
                        content: [
                            {
                                required: true,
                                message: '正文不能为空',
                                trigger: 'change'
                            }
                        ]
                    },
                    // add 代表添加 update 代表修改
                    formType: '',
                    // 是否显示表单的弹窗
                    show: false
                }
            },
            // 其他弹窗表单
            formDatas: {}
            // 表单相关结束 -----------------------------------------------------------
        };
    },
    // 监听 - 页面每次【加载时】执行(如：前进)
    onLoad(options = {}) {
        that = this;
        vk = that.vk;
        that.options = options;
        that.init(options);
    },
    // 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
    onReady() {},
    // 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
    onShow() {},
    // 监听 - 页面每次【隐藏时】执行(如：返回)
    onHide() {},
    // 函数
    methods: {
        // 页面数据初始化函数
        init(options) {
            originalForms['form1'] = vk.pubfn.copyObject(that.form1);
            this.queryForm1.formData = options;
        },
        // 页面跳转
        pageTo(path) {
            vk.navigateTo(path);
        },
        // 表单重置
        resetForm() {
            vk.pubfn.resetForm(originalForms, that);
        },
        // 搜索
        search() {
            that.$refs.table1.search();
        },
        // 刷新
        refresh() {
            that.$refs.table1.refresh();
        },
        // 获取当前选中的行的数据
        getCurrentRow() {
            return that.$refs.table1.getCurrentRow();
        },
        // 监听 - 行的选中高亮事件
        currentChange(val) {
            that.table1.selectItem = val;
        },
        // 当选择项发生变化时会触发该事件
        selectionChange(list) {
            that.table1.multipleSelection = list;
        },
        // 显示添加页面
        addBtn() {
            that.resetForm();
            that.form1.props.action = 'admin/cs-services/sys/add';
            that.form1.props.formType = 'add';
            that.form1.props.title = '添加';
            that.form1.props.show = true;
        },
        // 显示修改页面
        updateBtn({ item }) {
            that.form1.props.action = 'admin/cs-services/sys/update';
            that.form1.props.formType = 'update';
            that.form1.props.title = '编辑';
            that.form1.props.show = true;
            that.form1.data = item;
        },
        // 删除按钮
        deleteBtn({ item, deleteFn }) {
            deleteFn({
                action: 'admin/cs-services/sys/delete',
                data: {
                    _id: item._id
                }
            });
        },
        // 监听 - 批量操作的按钮点击事件
        batchBtn(index) {
            switch (index) {
                case 1:
                    vk.toast('批量操作按钮1');
                    break;
                case 2:
                    vk.toast('批量操作按钮2');
                    break;
                default:
                    break;
            }
        }
    },
    // 监听属性
    watch: {},
    // 过滤器
    filters: {},
    // 计算属性
    computed: {}
};
</script>
<style lang="scss" scoped>
.page-body {
}
</style>
